跳到主要内容

监听器

监听器让你可以响应 Rive 文件中的交互、属性变化和其他事件。当监听器被触发时,它可以执行更新属性值、触发 Rive 事件或运行其他逻辑等操作。

监听器由三个主要部分组成:

  • 目标:监听器要监听的对象
  • 监听:需要发生什么才会触发监听器
  • 动作:触发后会发生什么

使用监听器可以创建能够响应用户输入和状态变化的动态体验。

创建监听器​

  1. 选择你希望监听器响应的元素。

    如果要监听视图模型属性变化或 Rive 事件,请改为选择画板或嵌套组件。

  2. 在 Animations 面板中,点击 State Machine 旁边的图标以显示监听器。

  3. 点击 + 图标创建新的监听器,并选择该监听器应执行的动作。

  4. 选中监听器后,在右侧边栏中设置其 Target、Listen to 和其他选项。

目标​

Target 决定监听器要监听什么。目标可以是场景中的元素、画板或嵌套组件。

当你想监听元素上的交互(例如点击或拖拽)时,请使用元素作为目标。当你想监听视图模型属性变化、Rive 事件或属于该画板/组件的其他事件时,请使用画板或嵌套组件作为目标。

Opaque Target​

Opaque Target 控制指针事件是在此监听器的命中区域停止,还是继续传递到其后方的元素。

启用 Opaque Target 时,指针事件会在目标处停止。禁用时,指针事件可以穿透目标,并触发下方的其他监听器。

监听​

Listen to 是监听器要监视的条件。当条件满足时,监听器会被触发。

🎮 演示:listenerExamples

也可以在 Rive 社区 打开示例文件,查看每种 Listen To 条件的效果。

Listen to说明
View Model Change每当所选视图模型属性发生变化时触发。
Rive Event当所选 Rive 事件被触发时触发。
Pointer Enter当指针进入目标区域时触发。
Pointer Exit当指针离开目标区域时触发。
Pointer Move当指针在目标区域上移动时反复触发。
Pointer Down当指针在目标上按下时触发。
Pointer Up当指针在目标上释放时触发。
Pointer Drag在目标上按下后,指针移动时反复触发,直到释放。
Click当目标被点击或轻点时触发。
Focus当目标获得焦点时触发。
Blur当目标失去焦点时触发。
Keyboard当目标拥有焦点时,按下或释放按键时触发。
Gamepad在手柄输入时触发,例如按钮按下或摇杆移动。
Text Input当目标拥有焦点时输入文本时触发。
Semantic Action当辅助技术(例如屏幕阅读器)对目标执行操作时触发,例如轻点、增加或减少。

视图模型变化(View Model Change)​

此 Listen to 选项仅在监听器目标是画板或嵌套组件时可用。

View Model Change 监听器会在所选属性发生任何变化时触发。你不能指定期望值或变化方向。例如,Boolean 监听器会在值从 true 变为 false 或从 false 变为 true 时触发。

Rive 事件(Rive Event)​

此 Listen to 选项仅在监听器目标是画板或嵌套组件时可用。

我们强烈建议使用数据绑定(Data Binding) 在画板之间通信,而不是依赖嵌套 Rive 事件。

指针离开(Pointer Exit)​

Pointer Exit 只会在 Rive 能够读取指针位置时触发。如果目标接触到画布或容器边缘,将指针移出容器可能不会触发 Pointer Exit,因为指针已经离开了 Rive 正在追踪的区域。

焦点(Focus)​

为元素打开 Focusable,即可将其加入焦点顺序。使用 Focus 监听器响应元素获得焦点,使用 Blur 监听器响应元素失去焦点。

Focus Target 动作将焦点移到特定元素,Focus Traversal 则按焦点顺序逐步移动。

键盘(Keyboard)​

要响应按键,请添加 Keyboard 监听器并选择 On Key Down 或 On Key Up。按键会发送给当前拥有焦点的元素。

要在编辑器中试用键盘输入,请按 Option+Space 在开启键盘捕获的情况下播放,或点击播放栏中的 Toggle Keyboard Capture。这样按键会进入你的文件,而不是触发编辑器快捷键。

手柄(Gamepad)​

添加 Gamepad 监听器,即可用控制器的按钮和摇杆驱动状态机。脚本也可以监听手柄事件。

已打开文件底部的手柄图标会在 Rive 检测到控制器时变为绿色。

文本输入(Text Input)​

在工具栏中选择 Text Input 工具并绘制可编辑文本字段。在布局上绘制即可将其加入该布局。

使用 Inspector 中的 Text Input 部分设置字段的字体、颜色、占位符、选区颜色、背景,以及单行或多行模式。添加 Text Input 监听器,即可在字段拥有焦点并输入文本时作出响应。

语义操作(Semantic Action)​

Inspector 中的 Semantic 部分为元素指定角色(例如按钮、复选框、滑块或文本),以及其特征和状态。这有助于屏幕阅读器朗读并导航你的文件。

使用 Semantic Tap、Semantic Increase 和 Semantic Decrease 监听器来响应屏幕阅读器操作。配置语义操作的详情见语义(Semantics)。

监听器动作​

监听器动作会在监听器被触发时运行。

要添加监听器动作,请点击 State Machine Graph 下方面板中的 + 图标。

动作说明
View Model Change设置视图模型属性的值。参见数据绑定(Data Binding)。
Input Change(已弃用)设置状态机输入(Input) 的值。
Align Target定位对象使其跟随指针。
Focus Target将焦点移到特定元素。
Focus Traversal按焦点顺序逐步移动。
Report Event触发 Rive 事件。
Scripted Action运行监听器动作脚本。
💡

你可以为单个监听器添加多个动作,也可以在监听器动作中使用数据绑定值。

Align Target​

Align Target 动作会在监听器区域内触发监听器时,定位一个对象,使其跟随指针。

使用 Target Picker 选择你想要对齐的对象。

启用 Preserve Offset 可在动作触发时保持对象与指针之间的原始距离。禁用 Preserve Offset 时,对象会直接对齐到指针。

看完还有疑问?进群交流下!
与众多 Rive 创作者、开发者一起交流探讨与答疑解惑。
加入交流群